<template>
	<view>
		<button :disabled="disabled" v-if="mode === 'primary'" @click="clickButton" class="dev-button-primary" size="14" :loading="loading"
			:style="{'margin-right':`${right}rpx`,'margin-bottom':`${bottom}rpx`,'margin-left':`${left}rpx`,'margin-top':`${top}rpx`,'width':`${width}rpx`,'color':`${color}`,'height':`${height}rpx`,'line-height':`${height}rpx`,'border-radius':`${radius}rpx`,'background':`${bgColor}`,'font-size':`${fontSize}rpx`,'border':'0rpx solid #fff','display':elementType,'padding':elementType=='inline'?padding:'none'}">
			<slot></slot>
		</button>

		<button :disabled="disabled" v-show="mode === 'hollowed'" @click="clickButton" class="dev-button-hollowed" size="14"
			:loading="loading"
			:style="{'margin-right':`${right}rpx`,'margin-bottom':`${bottom}rpx`,'margin-left':`${left}rpx`,'margin-top':`${top}rpx`,'width':`${width}rpx`,'color':`${color}`,'height':`${height}rpx`,'line-height':`${height}rpx`,'border-radius':`${radius}rpx`,'border':`${borderWidth}rpx ${borderType} ${borderColor}`,'background':`${bgColor}`,'font-size':`${fontSize}rpx`,'display':elementType,'padding':elementType=='inline'?padding:'none'}">
			<slot></slot>
		</button>
	</view>
</template>

<script>
	export default {
		name: "dev-button",
		props: {
			//类型
			mode: {
				type: String,
				default: 'primary' //hollowed 镂空的
			},
			disabled:{
				type: Boolean,
				default: false //是否禁用
			},
			elementType: {
				type: String,
				default: 'block' //block 块元素 ； inline 行元素
			},
			//padding
			padding: {
				type: String,
				default: '8rpx 32rpx' //block 块元素 ； inline 行元素
			},
			//宽度
			width: {
				type: [String, Number],
				default: 146
			},
			// 高度
			height: {
				type: [String, Number],
				default: 50
			},
			//是否加载中
			loading: {
				type: Boolean,
				default: false
			},
			//圆角
			radius: {
				type: [String, Number],
				default: 30
			},
			//背景颜色
			bgColor: {
				type: String,
				default: 'url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png)'
			},
			//文字大小
			fontSize: {
				type: [String, Number],
				default: 24
			},
			//按钮文字颜色
			color: {
				type: String,
				default: '#fff'
			},
			//按钮边框颜色
			borderColor: {
				type: String,
				default: '#FA2230'
			},
			//按钮边框宽度
			borderWidth: {
				type: [String, Number],
				default: 1
			},
			//按钮边框类型
			borderType: {
				type: String,
				default: 'solid'
			},
			//按钮文字
			text: {
				type: [String, Number],
				default: '按钮'
			},
			//距离上部移动
			top: {
				type: [String, Number],
				default: 0
			},
			//左侧移动
			left: {
				type: [String, Number],
				default: 0
			},
			// 右侧移动
			right: {
				type: [String, Number],
				default: 0
			},
			//底部移动
			bottom: {
				type: [String, Number],
				default: 0
			},


		},

		data() {
			return {

			};
		},
		methods: {
			//点击按钮
			clickButton() {
				this.$emit('tapDev')
			}
		}
	}
</script>

<style lang="scss">
	.dev-button-primary {
		text-align: center;
		padding: 0;
		border: none !important;
		background-size: 100% 100%;
	}

	.dev-button-primary::after {
		border: initial;
	}



	.dev-button-hollowed {
		text-align: center;
		padding: 0;
	}
</style>
